<template>
  <div class="container">
    <div class="loginCard">
      <div class="img">
        <img src="../assets/image/login-swipcr.c9ec6b49.png" alt="" />
      </div>
      <div class="info">
        <form :model="ruleForm">
          <div class="title">优食安数字食堂云平台</div>
          <div class="username">
            <i class="el-icon-user"></i>
            <input v-model="ruleForm.account" type="text" />
          </div>
          <div class="username">
            <i class="el-icon-lock"></i>
            <input
              v-model="ruleForm.password"
              type="password"
              @keyup.enter="submit"
            />
          </div>
          <div class="button" style="width: 100%">
            <el-button size="medium" type="primary" round @click="submit"
              >登录</el-button
            >
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "../api/api"; // 导入我们的api接口
export default {
  data() {
    return {
      ruleForm: {
        account: "",
        password: "",
      },
      checked: true,
    };
  },
  methods: {
    getParams() {
      const params = new URLSearchParams(window.location.search);
      // 获取特定参数的值
      const ac = params.get("ac");
      if (ac !== null) {
        (this.ruleForm.account = ac), (this.ruleForm.password = ac);
        this.submit();
      }
    },
    // 登录
    async submit() {
      if (!this.ruleForm.account) {
        this.$message.error("请输入用户名！");
      } else if (!this.ruleForm.password) {
        this.$message.error("请输入用户密码！");
      } else {
        // 请求登录
        const res = await login(this.ruleForm);

        localStorage.setItem("shop_name", res.data.data.userinfo.shop_name);
        localStorage.setItem("shop_users_amount",
          res.data.data.userinfo.shop_users_amount);
        localStorage.setItem("shop_owner", res.data.data.userinfo.shop_owner);
        localStorage.setItem("shop_phone", res.data.data.userinfo.shop_phone);
        localStorage.setItem("shop_img", res.data.data.userinfo.shop_img);
        localStorage.setItem("shop_address",res.data.data.userinfo.shop_address);
        localStorage.setItem("area",res.data.data.userinfo.area)
        localStorage.setItem('users_amount',res.data.data.userinfo.users_amount)
        console.log(res.data.data,'ddddd');
        if (res.data.code == 0) {
          this.$message.error(res.data.msg);
        } else {
          sessionStorage.setItem("token", res.data.data.userinfo.token);
          sessionStorage.setItem("city_id", res.data.data.userinfo.city_id);
          if (sessionStorage.getItem("token")) {
            // 把shop_owner shop_phone多个参数通过$router传到larges页面
            // 在路由跳转时传递多个参数
            this.$router.replace({
              path: "/larges",
            });
          }
        }
      }
    },
  },
  mounted() {
    setTimeout(() => {
      this.getParams();
    });
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loginCard {
  border-radius: 5px;
  box-shadow: 0 0 2px 2px #eee;
  background-color: white;
  width: 1020px;
  height: 580px;
  display: flex;
}
.img {
  padding-right: 30px;
}
.info {
  background-color: white;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.info form {
  width: 300px;
  height: 332px;
  /* background-color: aqua; */
}
.info .title {
  padding-bottom: 35px;
  font-size: 28px;
  color: #333;
  text-align: center;
}
.username {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdee2;
  margin-bottom: 24px;
}
.username:hover {
  border-bottom-color: rgb(64, 158, 255);
}
.username:hover i {
  color: rgb(64, 158, 255);
}
.username i {
  font-size: 20px;
  margin-right: 10px;
}
.username input {
  width: 100%;
  height: 32px;
  padding-bottom: 1px;
  border: none;
  outline: none;
  background-color: transparent;
}
.rememberPsd {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 20px;
}
.rememberPsd .rem {
  padding-left: 10px;
  color: #515a6e;
  font-size: 14px;
}
.forget {
  font-size: 14px;
  color: #515a6e;
}
.forget:hover {
  color: rgb(64, 158, 255);
}
.button {
  text-align: center;
}
.button button {
  margin-top: 40px;
  width: 90%;
}
</style>
